<template>
	<view class="verify-code-login-container">
		<view class="verify-code-login-box">
			<div class="login-header">
				<h2 class="verify-code-login-title">验证码登录</h2>
			</div>
			<view class="cell-group">
				<!-- 手机号输入框 -->
				<view class="field-item">
					<text class="field-label">手机号</text>
					<input v-model="loginForm.phone" type="number" placeholder="请输入手机号" class="login-field"
						@blur="validateField('phone')" />
				</view>

				<!-- 验证码输入框 -->
				<view class="field-item">
					<text class="field-label">验证码</text>
					<input v-model="loginForm.code" type="number" placeholder="请输入验证码" class="login-field"
						@blur="validateField('code')" />
					<button class="send-code-btn" @click="sendVerifyCode" :disabled="isSending || !loginForm.phone">
						{{ isSending ? count + 's后重发' : '发送验证码' }}
					</button>
				</view>

				<!-- 错误提示 -->
				<view class="error-message" v-if="formErrors.phone">{{ formErrors.phone }}</view>
				<view class="error-message" v-if="formErrors.code">{{ formErrors.code }}</view>

				<!-- 登录按钮 -->
				<button @click="onSubmit" class="login-button" :loading="isLoading">
					{{ isLoading ? '登录中...' : '登录' }}
				</button>
			</view>

			<!-- 其他登录选项 -->
			<view class="other-login-options">
				<button @click="goToPasswordLogin" class="other-login-btn">
					密码登录
				</button>
				<button @click="onThirdLogin" class="other-login-btn">
					第三方登录
				</button>
			</view>

			<!-- 注册入口 -->
			<view class="goto">
				<button @click="onRegister" class="register-link">
					若还没有账号？点击前往注册
				</button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		setTokenLocal,
		setUserLocal
	} from "@/utils/auth.js";

	export default {
		data() {
			return {
				loginForm: {
					phone: "",
					code: ""
				},
				isSending: false,
				count: 60,
				phoneRules: [{
						required: true,
						message: '请输入手机号'
					},
					{
						pattern: /^1[3-9]\d{9}$/,
						message: '请输入正确的11位手机号'
					}
				],
				codeRules: [{
						required: true,
						message: '请输入验证码'
					},
					{
						pattern: /^\d{6}$/,
						message: '请输入6位数字验证码'
					}
				],
				formErrors: {
					phone: '',
					code: ''
				},
				isLoading: false,
				mockUserList: {
					'15158672571': {
						id: 1001,
						name: '测试用户',
						avatar: 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg',
						token: 'mock_token_1001'
					},
					'13900139000': {
						id: 1002,
						name: '演示用户',
						avatar: 'https://picsum.photos/200/200?random=2',
						token: 'mock_token_1002'
					}
				}
			};
		},
		methods: {
			// 字段验证
			validateField(field) {
				const rules = field === 'phone' ? this.phoneRules : this.codeRules;
				let error = '';

				rules.forEach(rule => {
					if (rule.required && !this.loginForm[field]) {
						error = rule.message;
					} else if (rule.pattern && this.loginForm[field] && !rule.pattern.test(this.loginForm[
						field])) {
						error = rule.message;
					}
				});

				this.formErrors[field] = error;
				return !error;
			},

			// 发送验证码
			sendVerifyCode() {
				if (!this.validateField('phone')) return;

				this.isSending = true;
				this.count = 60;

				// 模拟发送请求
				setTimeout(() => {
					uni.showToast({
						title: `验证码已发送至 ${this.loginForm.phone}`,
						icon: 'none',
						duration: 2000
					});

					// 倒计时
					const timer = setInterval(() => {
						if (this.count <= 1) {
							clearInterval(timer);
							this.count = 60;
							this.isSending = false;
						} else {
							this.count--;
						}
					}, 1000);
				}, 500);
			},

			// 登录提交
			onSubmit() {
				this.isLoading = true;
				const phoneValid = this.validateField('phone');
				const codeValid = this.validateField('code');

				if (!phoneValid || !codeValid) {
					uni.showToast({
						title: '请检查输入信息',
						icon: 'none'
					});
					this.isLoading = false;
					return;
				}

				// 验证码校验（模拟）
				if (!this.loginForm.code.startsWith('123')) {
					uni.showToast({
						title: '验证码错误，请重新输入',
						icon: 'none'
					});
					this.isLoading = false;
					return;
				}

				// 用户校验（模拟）
				const user = this.mockUserList[this.loginForm.phone];
				if (!user) {
					uni.showToast({
						title: '该手机号未注册',
						icon: 'none'
					});
					this.isLoading = false;
					return;
				}

				// 登录成功处理
				setTokenLocal(user.token);
				setUserLocal(user);
				uni.showToast({
					title: `欢迎回来，${user.name}`,
					icon: 'none'
				});

				// 跳转用户中心
				setTimeout(() => {
					uni.navigateTo({
						url: '/pages/user/user'
					});
					this.isLoading = false;
				}, 1000);
			},

			// 前往密码登录
			goToPasswordLogin() {
				uni.navigateTo({
					url: '/pages/login/login'
				});
			},

			// 第三方登录
			onThirdLogin() {
				uni.navigateTo({
					url: '/pages/thirdLogin/thirdLogin'
				});
			},

			// 前往注册
			onRegister() {
				uni.navigateTo({
					url: '/pages/register/register'
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	$bg-color: #f9f9f9;
	$primary-color: #007bff;
	$secondary-color: #f0f0f0;
	$text-color: #333;
	$link-color: #007bff;
	$border-color: #e0e0e0;
	$error-color: #e74c3c;

	.verify-code-login-container {
		display: flex;
		justify-content: center;
		align-items: center;
		min-height: 100vh;
		background-color: $bg-color;
		animation: fadeIn 1s ease;
	}

	@keyframes fadeIn {
		from {
			opacity: 0;
		}

		to {
			opacity: 1;
		}
	}

	.verify-code-login-box {
		width: 90%;
		max-width: 350px;
		padding: 30rpx;
		background-color: #fff;
		border-radius: 15rpx;
		box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.1);
		animation: slideIn 1s ease;
	}

	@keyframes slideIn {
		from {
			transform: translateY(-50rpx);
			opacity: 0;
		}

		to {
			transform: translateY(0);
			opacity: 1;
		}
	}

	.login-header {
		text-align: center;
		margin-bottom: 25rpx;
	}

	.verify-code-login-title {
		font-size: 28rpx;
		color: $text-color;
		font-weight: bold;
	}

	.cell-group {
		border: 1px solid $border-color;
		border-radius: 10rpx;
		padding: 20rpx;
	}

	// 输入框样式
	.field-item {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
		padding-bottom: 10rpx;
		border-bottom: 2px solid $secondary-color;
	}

	.field-label {
		width: 120rpx;
		font-size: 16rpx;
		color: $text-color;
	}

	.login-field {
		flex: 1;
		height: 40rpx;
		font-size: 16rpx;
		color: $text-color;
		padding: 0 10rpx;
	}

	// 验证码按钮
	.send-code-btn {
		color: $link-color;
		font-size: 12rpx;
		padding: 0 10rpx;
		background: transparent;
		border: none;
		text-decoration: underline;
	}

	.send-code-btn:disabled {
		color: #ccc;
	}

	// 错误提示
	.error-message {
		color: $error-color;
		font-size: 12rpx;
		margin-top: -10rpx;
		margin-bottom: 15rpx;
		padding-left: 120rpx;
	}

	// 登录按钮
	.login-button {
		width: 100%;
		margin-top: 20rpx;
		padding: 12rpx 0;
		background-color: $primary-color;
		color: #fff;
		border-radius: 8rpx;
		font-size: 18rpx;
		box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.1);
	}

	.login-button[loading] {
		opacity: 0.8;
	}

	// 其他登录选项
	.other-login-options {
		display: flex;
		justify-content: space-between;
		margin-top: 20rpx;
	}

	.other-login-btn {
		background: transparent;
		color: $link-color;
		text-decoration: underline;
		font-size: 14rpx;
		border: none;
		padding: 0;
	}

	// 注册入口
	.goto {
		margin-top: 20rpx;
		text-align: center;
	}

	.register-link {
		color: $link-color;
		text-decoration: underline;
		font-size: 14rpx;
		background: transparent;
		border: none;
		padding: 0;
	}
</style>